.index{
    display: flex;
    flex-direction: column;
 
    .index-content{
        height: 1px;
        flex-grow: 1;
        overflow-y: auto;
        // 轮播图
        .swiper{
            width: 100%;
            height: 200px;
            // background-color: #f00;
            .slider1{
                background: url(../../assets/images/index-swiper-bg1.jpg) center center;
                background-size: cover;
            }
            .slider2{
                background: url(../../assets/images/index-swiper-bg2.jpg) center top;
                background-size: cover;
            }
            .slider3{
                background: url(../../assets/images/index-swiper-bg3.jpg) center center;
                background-size: cover;
            }
        }
        // 主体内容
        section{
            margin: 15px 20px;
        }
        // 排名和打卡
        .main1{
            display: flex;
            height: 120px;
            // 今日排名
            i{
                font-style: normal;
            }
            .rank{
                position: relative;
                flex-grow: 1;
                width: 1px;
                background: url(../../assets/images/index-card-rank.png) no-repeat left bottom;
                background-size: 75%;
                background-color: rgba(21, 146, 204, 0.7);;
                margin-right: 15px;
                border-radius: 15px;
                box-sizing: border-box;
                padding: 10px;
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                font-weight: bold;
                #rankNum{
                    position: absolute;
                    top: 75px;
                    right: 15px;
                    font-size: 30px;
                    color: #fff;
                }
            }
            // 累计打卡
            .checkIn{
                position: relative;
                flex-grow: 2;
                width: 1px;
                padding: 10px;
                box-sizing: border-box;
                background: url(../../assets/images/index-card-sum.png) no-repeat;
                background-position: 10%;
                background-size: 50%;
                background-color:rgba(123, 203, 245, 0.7);
                border-radius: 15px;
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                font-weight: bold;
                // 今日打卡按钮
                #checkIn-btn{
                    position: absolute;
                    width: 80px;
                    height: 45px;
                    bottom: 30px;
                    right: 18px;
                    border: 2px solid rgba(0, 78, 115, 1);
                    background-color:rgba(123, 203, 245,0) ;
                    border-radius: 22px;
                }
            }
        }
        //运动数据+徽章
        .main2 {
            display: flex;
            height: 120px;
            i{
                font-style: normal;
            }
            .sportData {
                width: 1px;
                flex-grow: 1;
                margin-right: 15px;
                background: url(../../assets/images/index-card-data.png) no-repeat center center;
                background-size: cover;
                border-radius: 15px;
                text-indent: 1em;
                line-height: 2em;
                a {
                    color: #fff;
                    font-size: 16px;
                }
            }
            .badge {
                position: relative;
                flex-grow: 1;
                width: 1px;
                padding: 10px;
                box-sizing: border-box;
                background: url(../../assets/images/index-card-sum.png) no-repeat;
                background-position: 10%;
                background-size: 50%;
                background-color:rgba(123, 203, 245, 0.7);
                border-radius: 15px;
                color: rgba(0, 78, 115, 1);
                font-size: 16px;
                font-weight: bold;
                // 今日打卡按钮
                span{
                    position: absolute;
                    top: 60px;
                    right: 15px;
                    color: #fff;
                    i{
                        font-size: 30px;
                    }
                }
            }
        }
        // 课程训练
        .main3 {
            background: url(../../assets/images/index-swiper-bg2.jpg) no-repeat top center;
            background-size: cover;
            height: 100px;
            border-radius: 15px;
            color: #fff;
            text-indent: 1em;
            line-height: 2em;
            a {
                color: #fff;
            }
        }
        //户外跑步
        .main4 {
            background: url(../../assets/images/index-card-run.png) no-repeat top center;
            background-size: cover;
            height: 100px;
            border-radius: 15px;
            text-indent: 1em;
            line-height: 2em;
            a {
                color: #fff;
            }
        }
    }
   
  
}